<template>
  <div class="HotBang">
    <div class="hotBang-title">
      <div class="hot-text">
        <img class="hot-icon" src="@/assets/image/hot.png" alt="">
        <span>本周热门榜单</span>
      </div>
      <router-link class="all-bang" to="/">全部榜单 &gt;</router-link>
      <router-view></router-view>
    </div>
    <div class="hot-list">
      <ul>
        <li v-for="(item,index) in hotList" :key="index" >
          <router-link to="/">
            <div class="item-img">
              <img :src="require('@/assets/image/hot-list-img1.jpg')" alt="">
            </div>
            <p class="item-name">{{item.desc}}</p>
            <p class="item-price">
              <span class="item-rmb">¥<em class="price-num">623.5</em></span>起
            </p>
          </router-link>
          <router-view></router-view>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: "HotBang",
    props:['hotList'],
  }
</script>

<style scoped lang="less">
  .HotBang {
    color: #212121;
    margin-top: .2rem;
    background-color: #fff;
    .hotBang-title {
      display: flex;
      justify-content: space-between;
      padding: 0.24rem 0 0.26rem;
      .hot-icon {
        width: .3rem;
        height: .3rem;
        margin-left: .2rem;
        margin-right: .08rem;
      }
      .all-bang {
        color: #616161;
        font-size: .24rem;
        margin-right: .32rem;
      }
    }
    .hot-list {
      padding: 0 0.24rem;
      overflow-x: scroll;
      white-space: nowrap;
      ul {
        display: flex;
        li {
          width: 2rem;
          margin-right: .12rem;
          padding: 0.06rem 0 0.2rem;
          a {
            display: block;
            .item-img {
              width: 100%;
              img {
                width: 100%;
              }
            }
            .item-name {
              margin-top: 0.12rem;
              color: #212121;
              font-size: .24rem;
              line-height: .32rem;
              text-align: center;
              overflow: hidden;
              width: 100%;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            .item-price {
              color: #616161;
              font-size: .24rem;
              line-height: .36rem;
              text-align: center;
              .item-rmb {
                color: #ff8300;
                .price-num {
                  font-size: .28rem;
                  font-style: normal;
                }
              }
            }
          }
        }
      }
    }
  }
</style>